<template>
  <a-card class="body-container">
    <s-list-form :enable-more="false" @change="
      $nextTick(() => {
        $calcTableHeight()
      })
      ">
      <template #less>
        <s-form-item label="文件名称" size="list-middle" name="fileName" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入文件名称" v-model="query.fileName" />
        </s-form-item>
        <s-form-item label="报表周期" size="list-middle" name="reportingCycle" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请输入下载路径" code="REPORTING_CYCLE" v-model="query.reportingCycle" />
        </s-form-item>
        <s-form-item label="发起时间" size="list-middle" name="uploadTime" :colon="true" :display-title="true">
          <s-date-picker :allow-clear="true" type="range" value-format="YYYY-MM-DD" :show-time="true"
            v-model="query.uploadTime" />
        </s-form-item>

      </template>
      <template #more>
        <s-form-item label="文件大小" size="list-middle" name="fileSize" :colon="true" :display-title="true"
          :rules="[{ 'max': 30, 'message': '最长为30位' }]">
          <s-input :allow-clear="true" placeholder="请输入文件大小" v-model="query.fileSize" />
        </s-form-item>
        <s-form-item label="上传人" size="list-middle" name="uploadUser" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入上传人" v-model="query.uploadUser" />
        </s-form-item>
        <s-form-item label="上传时间" size="list-middle" name="uploadTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入上传时间" v-model="query.uploadTime" />
        </s-form-item>
        <s-form-item label="更新人" size="list-middle" name="updateUser" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入更新人" v-model="query.updateUser" />
        </s-form-item>
        <s-form-item label="更新时间" size="list-middle" name="updateTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入更新时间" v-model="query.updateTime" />
        </s-form-item>
        <s-form-item label="下载量" size="list-middle" name="downloadNumber" :colon="true" :display-title="true"
          :rules="[{ 'max': 10, 'message': '最长为10位' }]">
          <s-input :allow-clear="true" placeholder="请输入下载量" v-model="query.downloadNumber" />
        </s-form-item>
        <s-form-item label="报表周期" size="list-middle" name="reportingCycle" :colon="true" :display-title="true"
          :rules="[{ 'max': 4, 'message': '最长为4位' }]">
          <s-input :allow-clear="true" placeholder="请输入报表周期" v-model="query.reportingCycle" />
        </s-form-item>

      </template>
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <!-- <a-form-item label="" name="name">
          <a-upload name="file" action="http://192.168.0.122:1110/file/uploadDetail" :headers="headers"
            @success="handleSuccess" :before-upload="beforeUpload">
            <a-button>
              <upload-outlined></upload-outlined>
              新增报表
            </a-button>
          </a-upload>
          <div style="color:#D9001B">支持word、excel、pdf等格式</div>
        </a-form-item> -->
        <!-- 
        <input ref="uploadInput" type="file" style="display: none" @change="onFileChange" />
        <a-popconfirm v-if="authorize.deleteMulti" title="确认删除所选数据？" ok-text="是" cancel-text="否" @confirm="deleteMulti">
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm> -->
      </template>
      <template #right>
        <s-button v-if="authorize.insert" type="primary" icon="plus-outlined" @click="showDrawer">新增</s-button>

        <s-button type="primary" icon="search-outlined" @click="search">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query = {}">重置</s-button>
      </template>
    </s-tool-bar>
    <s-table ref="table" bordered :echos="[]" :scroll="{ y: tableHeight }" :columns="columns"
      url="/modules/doorReportFile/pageList" rowKey="fileId">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'action'">
          <a v-if="authorize.selectOneById" style="margin-right: 8px" @click="handleDownload(record)">
            <s-icon type="eye-outlined" />下载
          </a>
          <!-- <a v-if="authorize.update" style="margin-right: 8px" @click="$refs.update.open(record.id)">
            <s-icon type="edit-outlined" />编辑
          </a> -->
          <a-popconfirm v-if="authorize.delete" title="确认删除此条数据？" ok-text="是" cancel-text="否"
            @confirm="deleteById(record)">
            <a style="margin-right: 8px">
              <s-icon type="delete-outlined" />删除
            </a>
          </a-popconfirm>

          <span @click="toggleFavorite(record)" :type="record.isLike ? '02' : '01'" class="shouC">
            <span class="icon-xingxing" v-if="record.isLike == '02'"></span>
            <span class="icon-ditu-xing" v-else></span>
          </span>
          <!-- <span class="icon-xingxing" v-if="showFirstIcon" @click="tinySpot(record.id, 1)"></span>
          <span class="icon-ditu-xing" v-else @click="tinySpot(record.id, 0)"></span> -->
        </template>
        <template v-else-if="column.key === 'xuHao'">
          {{ index + 1 }}
        </template>
      </template>
    </s-table>

    <a-drawer title="报表上传" placement="right" :closable="false" :visible="visible" :destroyOnClose="true"
      :after-visible-change="afterVisibleChange" @close="onClose" :width="400" :body-style="{ paddingBottom: '80px' }">
      <a-form-item label="名称: " name="name">
        <a-input class="custom-input" v-model:value="uploadFileName"></a-input>
      </a-form-item>
      <a-form-item label="附件: " name="name">
        <a-upload name="file" action="http://192.168.0.122:1110/file/uploadDetail" :headers="headers"
          @success="handleSuccess" :before-upload="beforeUpload">
          <a-button>
            <upload-outlined></upload-outlined>
            点击上传文件
          </a-button>
        </a-upload>
        <!-- <div style="color:#D9001B">支持word、excel、pdf等格式</div> -->
      </a-form-item>
      <div>
        <a-button class="quXiao" @click="clear">取消</a-button>
        <a-button type="primary" @click="uploadFiles">上传</a-button>
      </div>
    </a-drawer>

    <detail ref="detail" />
    <add ref="add" @success="search" />
    <update ref="update" @success="search" />
  </a-card>
</template>

<script>
const columns = [
  {
    'title': '序号',
    'dataIndex': 'serialNumber',
    'width': 100,
    'key': 'xuHao',
    'sorter': false,
    customRender: (text, record, index) => index + 1
  },
  { 'dataIndex': 'fileName', 'title': '文件名称', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'uploadTimeReturn', 'title': '系统生成时间', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'downloadNumber', 'title': '下载量', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'title': '操作', 'fixed': 'right', 'key': 'action', 'width': 300 }]
import Detail from './detail/index.vue'
import Add from './add/index.vue'
import Update from './update/index.vue'
import { message } from 'ant-design-vue';

const BASIC_URL = import.meta.env.VITE_API_PATH;
export default {
  name: 'QueryList',
  components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      columns: columns,
      showFirstIcon: true, // 显示隐藏 收藏按钮
      visible: false,
      fileList: [],
      uploadFile: {},
      uploadFileName: '',
      currentPage: 1, // 当前页码
      totalItems: 0, // 数据总数
      pageSize: 8, // 每页显示的数据条数
      downloading: false, // 是否正在下载
      downloadProgress: 0, // 下载进度
      progressStatus: '', // 进度条状态，可选值有 'normal', 'exception', 'active', 'success'
    }
  },
  authorize: '/modules/doorReportFile/permissionList',
  methods: {
    // 新增
    uploadFiles() {
      const jsonString = {
        fileId: this.uploadFile.fileId,
        fileName: this.uploadFileName, //文件名称
        fileSize: this.uploadFile.fileSize, //文件大小
        filePath: this.uploadFile.filePath, //文件地址
        uploadTime: this.uploadFile.uploadTime, //上传时间
        fileType: this.uploadFile.fileType //文件类型
      }
      console.log(jsonString);
      if (this.uploadFile.fileId && this.uploadFile.fileName) {
        this.$api.PUT('/modules/doorReportFile/insert', jsonString, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          this.visible = false;
          this.searchFor()
          this.uploadFile = {};
          this.uploadFileName = '';
        })
      } else {
        message.error('请上传文件');
      }
    },
    // 查询页面
    searchFor() {
      let query = this.query;
      this.$api.GET('/modules/doorReportFile/pageList', query).then(res => {
        console.log(res);
        this.query = res.data
      })
      this.$refs.table.search(query)
    },
    // 取消按钮
    clear() {
      const params = {
        fileType: this.uploadFile.fileType,
        fileId: this.uploadFile.fileId
      }
      if (this.uploadFile.fileType && this.uploadFile.fileId) {
        this.$api.GET('/file/delete', params).then(res => {
          console.log('报表下载取消按钮', res);
          this.visible = false;
          this.uploadFile.fileName = ''
        })
      } else {
        this.visible = false;
      }
    },
    handleSuccess(res) {
      // 处理上传成功后的逻辑
      this.uploadFile = res.data
    },
    // 上传文件
    beforeUpload(file) {
      // 执行文件上传前的逻辑，例如校验文件类型、大小等
      console.log('文件上传前', file);
    },
    showDrawer() {
      this.visible = true;
    },

    onClose() {
      this.visible = false;
    },
    // 报表下载
    handleDownload(record) {
      const param = {
        fileType: record.fileType,
        fileId: record.fileId,
      }
      this.$api.GET('/down/statics/getFile', param).then(res => {
        console.log('报表下载', res);
        const link = document.createElement('a');
        link.href = BASIC_URL + '/file/downLoad/' + record.filePath;
        link.download = record.filePath;

        // 将链接添加到页面中并触发点击事件
        document.body.appendChild(link);
        link.click();
        // 清理链接对象
        document.body.removeChild(link);
      })

    },
    handleUpload() {
      this.$api.PUT('/modules/doorReportFile/insert').then(res => {
        console.log(res.data);
      })
      // 触发上传文件的操作

      // this.$refs.uploadInput.click();
      // this.$api.PUT('/modules/doorReportFile/insert', values).then(res => {
      //   this.confirmLoading = false
      //   this.visible = false
      //   this.$emit('success');
      //   this.$message.info(res.msg)
      // }).catch(() => {
      //   this.confirmLoading = false
      // })
    },
    onFileChange(event) {
      const file = event.target.files[0];
      // 处理上传的文件
      console.log("上传的文件：", file);
      // 在这里可以将文件发送到服务器进行处理或其他操作
    },
    // 星星 收藏
    toggleFavorite(record) {
      if (record.isLike === '02') {
        record.isLike = '01'
      } else {
        record.isLike = '02'
      }
      const params = {
        id: record.fileId,
        like: record.isLike,
      }
      if (record.isLike) {
        this.$api.GET('/modules/doorReportFile/collect', params).then(res => {
          record.isLike = '02';
          this.search()
        })
      }
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api.DELETE('/modules/doorReportFile/deleteMulti', { ids: keys.toString() }).then(() => {
          this.$loading(false)
          this.search()
        }).catch(() => {
          this.$loading(false)
        })
      }
    },
    search() {
      const _this = this
      const query = Object.assign({}, this.query)
      this.$refs.table.search(query)
    },
    deleteById(record, id) {
      console.log(record);
      const param = {
        fileType: record.fileType,
        fileId: record.fileId,
      }
      this.$loading(true)
      this.$api.DELETE('/modules/doorReportFile/delete', { id: record.fileId }).then(() => {
        this.$loading(false)
        this.search()
      })
      this.$api.GET('/file/delete', param).then(res => {
        this.search()
      })
    }
  }
}
</script>

<style lang="less" scoped></style>